<template>
  <el-tabs class="picLibrary">
    <modal :visible="visiblity" :width="800" :title="title" @close="close">
      <section v-if="level === 2">
        <el-tabs
          v-model="selectType"
          @tab-click="clickLeft(selectType)"
          tab-position="left"
          type="border-card"
          style="height:490px"
        >
          <el-tab-pane
            v-for="item in typeList"
            :key="item.key"
            :label="item.label"
            :name="item.key"
          >
            <div class="btn_container">
              <span
                class="btn_group"
                v-for="typeItem in item.children"
                :key="typeItem.key"
                @click="clickBtn(typeItem.key)"
              >
                <el-button class="top_button" type="text">{{ typeItem.type }}</el-button>
                <el-divider direction="vertical"></el-divider>
              </span>
            </div>
            <div class="self_divider"></div>
            <ul class="images_container">
              <li v-for="item in data" class="img_item" :key="item" @click="selected(item)">
                <img
                  src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
                  alt
                />
                <div>图片名称</div>
              </li>
            </ul>
            <div class="foot_container">
              <slot></slot>
            </div>
          </el-tab-pane>
        </el-tabs>
      </section>
      <section v-else>
        <div class="btn_container">
          <span class="btn_group" v-for="typeItem in typeList" :key="typeItem.key" @click="clickBtn(typeItem.key)">
            <el-button class="top_button" type="text">{{ typeItem.type }}</el-button>
            <el-divider direction="vertical"></el-divider>
          </span>
        </div>
        <div class="self_divider"></div>
        <ul class="images_container">
          <li v-for="item in data" class="img_item" :key="item"  @click="selected(item)">
            <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt />
            <div>图片名称</div>
          </li>
        </ul>
        <div class="foot_container">
          <slot></slot>
        </div>
      </section>
    </modal>
  </el-tabs>
</template>


<script>
export default {
    props: {
        visiblity: {
            type: Boolean,
            default: false,
        },
        // 分类的名称
        typeList: {
            type: Array,
            default: () => [{}],
            required: true,
        },
        title: String,
        // level = 2 有侧边的分类 类似图片库
        // level = 1 无侧边分类   类似特效库
        level: {
            type: Number,
            default: 2,
        },
        data:{
          type:Array,
          default:()=>[]
        }
    },
    data() {
        return {
            selectType: this.typeList[0].key,
            paginationSet: {},
        };
    },
    methods: {
        close() {
            this.$emit('close');
        },
        // 点击侧边tab事件
        clickLeft(key) {
            this.$emit('click-left', key);
        },
        // 点击顶部按钮事件
        clickBtn(key) {
          if(this.level === 2){
              this.$emit('click-top',this.selectType, key);
          }else{
              this.$emit('click-top', key);
          }
        },
        // 选中图片事件
        selected(data){
            this.$emit("selected",data)
        }
    },
};
</script>

<style lang="scss">
.self_divider {
    display: block;
    height: 1px;
    width: 100%;
    background-color: #dcdfe6;
}
.images_container {
    padding: 6px 0;
    height: 380px;
    overflow: hidden;
    .img_item {
        position: relative;
        width: 115px;
        height: 115px;
        margin: 8px 4px 0px;
        display: inline-block;
        background: #ddd;
        &:hover {
            div {
                height: 30px;
                transition: all 0.4s;
            }
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            vertical-align: middle;
        }
        div {
            position: absolute;
            text-align: center;
            height: 0px;
            color: #fff;
            font-size: 14px;
            line-height: 30px;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.3);
        }
    }
}
.el-tabs__content {
    padding: 6px 15px !important;
}
.top_button {
    padding: 0px 10px 4px;
}
.btn_container > span.btn_group:last-child .el-divider--vertical {
    display: none;
}
.foot_container {
    margin-top: 10px;
    .btn {
        float: right;
        margin-right: 6px;
    }
}
</style>